html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(10, 10, 10);
  height: 100vh;
  overflow: hidden;
}

$resolution: 20;
$box-size: 400px;
$speed: 4s;

$rainbow: red, orange, yellow, green, blue, indigo, violet;

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;

  @for $i from 1 through $resolution {
    .block_#{$i} {
      animation: spin $speed infinite ease-in-out,
        rainbow $speed infinite linear;
      $size: calc(($box-size / $resolution) * $i);
      animation-delay: 0.1s * $i;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: calc($size / -2);
      border: 1px solid transparent;
      width: $size;
      height: $size;
    }
  }
}

@keyframes rainbow {
  @each $current-color in $rainbow {
    $i: index($rainbow, $current-color);
    #{percentage(calc(1 / length($rainbow)) * $i)} {
      border-color: $current-color;
    }
  }
  //   100% {
  //     border-color: transparent;
  //   }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(90deg);
  }
  60% {
    transform: rotate(90deg);
  }
  80% {
    transform: rotate(0deg);
  }
}
